<template>
  <el-card class="mt-10">
    <div class="china-chart" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "ChinaChart",
};
</script>

<script lang="ts" setup>
import * as echart from "echarts";
import { ref, onMounted } from "vue";
import china from "./china.json";

// 注册地图
echart.registerMap("china", china as any);

const chartRef = ref();
onMounted(() => {
  const myEchart = echart.init(chartRef.value);

  const data = [
    {
      name: "台湾",
      value: "39152",
    },
    {
      name: "香港",
      value: "638",
    },
    {
      name: "贵州",
      value: "12",
    },
    {
      name: "宁夏",
      value: "6",
    },
    {
      name: "山西",
      value: "126",
    },
    {
      name: "广东",
      value: "51",
    },
    {
      name: "内蒙古",
      value: "35",
    },
    {
      name: "北京",
      value: "26",
    },
    {
      name: "福建",
      value: "21",
    },
    {
      name: "陕西",
      value: "12",
    },
    {
      name: "新疆",
      value: "9",
    },
    {
      name: "湖南",
      value: "8",
    },
    {
      name: "上海",
      value: "7",
    },
    {
      name: "云南",
      value: "7",
    },
    {
      name: "天津",
      value: "7",
    },
    {
      name: "重庆",
      value: "7",
    },
    {
      name: "江苏",
      value: "5",
    },
    {
      name: "河南",
      value: "3",
    },
    {
      name: "安徽",
      value: "3",
    },
    {
      name: "四川",
      value: "2",
    },
    {
      name: "浙江",
      value: "2",
    },
    {
      name: "黑龙江",
      value: "2",
    },
    {
      name: "山东",
      value: "2",
    },
    {
      name: "青海",
      value: "2",
    },
    {
      name: "西藏",
      value: "1",
    },
    {
      name: "湖北",
      value: "0",
    },
    {
      name: "吉林",
      value: "0",
    },
    {
      name: "海南",
      value: "0",
    },
    {
      name: "广西",
      value: "0",
    },
    {
      name: "河北",
      value: "0",
    },
    {
      name: "辽宁",
      value: "0",
    },
    {
      name: "江西",
      value: "0",
    },
    {
      name: "甘肃",
      value: "0",
    },
  ];

  const option = {
    series: {
      type: "map",
      map: "china", //使用哪个地图
      data,
      label: {
        show: true,
      },
      zoom: 1.2,
    },
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 10000, color: "#b80909" }, // 不指定 max，表示 max 为无限大（Infinity）。
        { min: 1000, max: 9999, color: "#e64546" },
        { min: 100, max: 999, color: "#f57567" },
        { min: 10, max: 99, color: "#ff9985" },
        { min: 1, max: 9, color: "#ffe5db" },
        { value: 0, color: "#fff" }, // 表示 value 等于 123 的情况。 // 不指定 min，表示 min 为无限大（-Infinity）。
      ],
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.china-chart {
  height: 600px;
}
</style>
